<template>
	<view>
		<view class="header">
			<u-search :inputStyle="{fontFamily: 'PingFang SC'}" :actionStyle="{
				background: '#FFFFFF',
				width: '180rpx',
			    height: '60rpx',
				lineHeight: '60rpx',
				fontFamily: 'PingFang SC',
				borderRadius: '30rpx',
			   alignItems: 'center',
			   textAlign: 'center'
			   }" placeholder="请输入型号" inputAlign="center" v-model="model" height="70" actionText="查询" @custom="custom">
			</u-search>

		</view>
		<view class="content-box">
			<u-image :src="url+windIo.picUrl" width="80px" height="80px" mode="widthFit"
				@click="imgClick(windIo.picUrl)">
			</u-image>
			<view class="title">{{windIo.model||''}}</view>
			<u-parse style="margin-left: 20rpx;margin-right: 20rpx;" :html="windIo.content" :domain="domain"></u-parse>
		</view>
		<view>
			<u-cell-group>
				<u-cell-item :value-style="{fontSize:'28rpx',color: '#333333',fontFamily: 'PingFang SC'}"
					:value="windIo.type||''" isLink="">
					<view slot="title" class="cell-title">系列</view>
				</u-cell-item>
				<u-cell-item :value-style="{fontSize:'28rpx',color: '#333333',fontFamily: 'PingFang SC'}"
					:value="windIo.parentCode||''" isLink="">
					<view slot="title" class="cell-title">父类</view>
				</u-cell-item>
				<u-cell-item :value-style="{fontSize:'28rpx',color: '#333333',fontFamily: 'PingFang SC'}"
					:value="windIo.typeContent||''" isLink="">
					<view slot="title" class="cell-title"> 类别属性</view>
				</u-cell-item>

				<u-cell-item :value-style="{fontSize:'28rpx',color: '#333333',fontFamily: 'PingFang SC'}"
					:value="windIo.channels||''" isLink="">
					<view slot="title" class="cell-title"> 通道数</view>
				</u-cell-item>

				<u-cell-item :value-style="{fontSize:'28rpx',color: '#333333',fontFamily: 'PingFang SC'}"
					:value="windIo.ebusPower||''" isLink="">
					<view slot="title" class="cell-title">E-bus电耗</view>
				</u-cell-item>
				<u-cell-item :value-style="{fontSize:'28rpx',color: '#333333',fontFamily: 'PingFang SC'}"
					:value="windIo.voltage||''" isLink="">
					<view slot="title" class="cell-title">正常电压</view>
				</u-cell-item>







				<!-- <u-cell-item :value-style="{fontSize:'28rpx',color: '#333333',fontFamily: 'PingFang SC'}" isLink=""
					@click="argsLink()">
					<view slot="title" class="cell-title">参数简介</view>
				</u-cell-item>
 -->

			</u-cell-group>
			<view class="content-box-bottom">
				<u-image :src="url+windIo.codeUrl" width="80px" height="80px" mode="widthFit"
					@longpress="codeImgClick(windIo.qrcodeUrl)">
				</u-image>
			</view>
		</view>
		<u-picker mode="selector" v-model="show" :default-selector="[0]" :range="windIos" range-key="model"
			@confirm="confirm"></u-picker>
		</u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				model: "",
				url: this.baseUrl,
				windIos: [],
				windIo: {
					model: "",
					type: "",
					system: "",
					typeContent: "",
					channels: "",
					ebusPower: "",
					leds: "",
					codeUrl: "",
					picUrl: "",
					content: ""
				},
				show: false,
			}
		},
		mounted() {},
		onLoad(option) {
			// this.baseUrl = this.baseUrl;
			//this.domain = this.domain;

		},
		methods: {
			argsLink() {
				// #ifdef APP-PLUS
				plus.runtime.openURL(this.windIo.codeUrl)
				// #endif
				// #ifdef H5
				window.open(this.windIo.codeUrl)
				// #endif
				// #ifdef MP
				uni.setClipboardData({
					data: this.windIo.codeUrl,
					success: () => {
						uni.hideToast();
						this.$nextTick(() => {
							this.$u.toast('链接已复制，请在浏览器打开');
						})
					}
				});
				// #endif
			},
			imgClick(url) {
				wx.previewImage({
					urls: [this.baseUrl + url], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
					current: '', // 当前显示图片的http链接，默认是第一个
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
				})
			},
			codeImgClick(url) {

				uni.navigateTo({
					url: '/subpackage/tool/wind/wind_web?url=' + url
				})
			},

			custom(e) {
				this.getWindIos(this.model);
			},
			confirm(e) {
				this.windIo = this.windIos[e[0]];
				this.show = false;
			},
			cancel(e) {
				this.show = false;
			},

			getWindIos(model) {
				this.$u.api.getWindIos({
						pageNum: this.pageNum,
						pageSize: this.pageSize,
						model: this.model,
					})
					.then(res => {
						console.log(JSON.stringify(res));
						if (res.rows.length == 0) {
							this.windIo = {};
							this.show = false;
							uni.showToast({
								title: "抱歉暂无此型号!",
								icon: "none"
							})
						} else if (res.rows.length == 1) {
							this.show = false;
							this.windIo = res.rows[0];
						} else {
							this.windIos = res.rows;
							this.show = true;
						}
					});
			}
		},
	}
</script>
<style lang="scss">
	.header {
		background-color: #3BA2FF;
		padding-top: 24rpx;
		padding-bottom: 24rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
		align-items: center;
		justify-content: center;
		display: flex;
	}

	.cell-text {
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		line-height: 48px;
	}

	.content-box {
		align-items: center;
		justify-content: center;
		display: flex;
		flex-direction: column;
		padding: 30rpx;

		.content {
			font-size: 22rpx;
			font-family: PingFang SC;
			color: #808080;
		}

		.title {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 48rpx;
		}
	}

	.cell-title {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.cell-value {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.content-box-bottom {
		align-items: center;
		justify-content: center;
		display: flex;
		flex-direction: column;
		padding: 30rpx;
	}
</style>
